<template>
	<view class="content">
		<view class="address" @click="nav('addressList')" v-if="addressShow">
			<block v-if="addressData.id">
				<image src="/static/address.png" mode=""></image>
				<view class="text">
					<view class="">
						<text>{{addressData.name}} </text><text>{{addressData.tel}}</text>
					</view>
					<view class="">
						{{addressData.add_a+addressData.add_b+addressData.add_s}}
					</view>
				</view>
				<u-icon name="edit-pen-fill" size="34" @click.native.stop="nav(item)"></u-icon>
			</block>
			<block v-else>
				<image src="../../static/address.png" mode=""></image>
				<text>我的收货地址</text>
				<u-icon name="arrow-right-double"></u-icon>
			</block>
			

		</view>

		<view class="goods_list">
			<view class="goods" v-for="(item ,index) in goodsList">
				<view class="" style="display: flex;">
					<image :src="item.pic" mode=""></image>
					<view class="goods_text">
						<view class="title">
							{{item.title}}
						</view>
						<view class="type">
							<!-- <text>超级过山车教程</text> -->
						</view>
						<view class="num">
							<text>￥{{order.member_zt==2?item.price_s:item.price_a}}<text>/{{item.day}}天</text></text>
							<text class="statistics_num"> <text>X</text>{{item.num}}</text>
						</view>
					</view>
				</view>
				<view class="prop_list" v-if="item.props_list.num">
					<u-icon name="arrow-right"></u-icon>
					<view class="">
						<text>￥{{item.props_list.price}}</text> <text class="statistics_num">
							<text>X</text>{{item.props_list.num}}</text>
					</view>
					<view style="">道具购买 | {{item.props_list.title}}</view>
				</view>
				<view class="prop_list" v-if="item.rent_list.num">
					<u-icon name="arrow-right"></u-icon>
					<view class="">
						<text>￥{{item.rent_list.price_s}}/天</text>(押金：{{item.rent_list.price}}) <text
							class="statistics_num"> <text>X</text>{{item.rent_list.num}}</text>
					</view>
					<view style="">道具租赁 | {{item.rent_list.title}}</view>
				</view>
				<u-line color="#ccc" margin="30rpx 0"></u-line>
			</view>
			
			<view class="prop_list" v-for="(item ,index) in order.props_list">
				<u-icon name="arrow-right"></u-icon>
				<view class="">
					<text>￥{{item.price_s}}/天</text>(押金：{{item.price}}) <text
						class="statistics_num"> <text>X</text>{{item.num}}</text>
				</view>
				<view style="">综合道具 | {{item.title}}</view>
			</view>
		</view>

		<view class="remark" v-if="userData.member_zt!=2">
			<view class="buyVip" @click="checked=!checked">
				<view class="text">
					<view class="">
						顺便买会员
					</view>
					<view class="">
						（顺便买会员提示文字，超管自己写）
					</view>
				</view>
				<image :src="checked?'/static/select.png':'/static/not_select.png'" mode=""></image>
			</view>
<!-- 			<view class="remark">
				<text>订单备注</text>
				<text>无备注></text>
			</view> -->

		</view>

		<view class="statistics">
			<view class="statistics_item">
				<text>商品总额</text>
				<text>
					<text>￥{{goodsMoney}}</text><text v-if="order.member_zt==2" style="text-decoration: line-through;font-size: 24upx;color: #999999;font-weight: 100;">￥{{order.price}}</text>
				</text>		
			</view>
			<view class="statistics_item">
				<text>道具</text>
				<text>￥{{order.price_r}}</text>
			</view>
			<view class="statistics_item" v-if="checked">
				<text>会员</text>
				<text>￥{{vipData.price}}</text>
			</view>
			<view class="statistics_item">
				<text>运费</text>
				<text>包邮</text>
			</view>
			<view class="statistics_item" @click="discount">
				<text>优惠券</text>
				<text>{{discountCoupon.price||'无'}}</text>
			</view>
<!-- 			<view class="statistics_item">
				<text>年费会员</text>
				<text>￥3060</text>
			</view> -->
			<view class="statistics_item">
				<text>合计</text>
				<text v-if="order.order.price_room">{{order.price_room}}</text>
				<text :style="{textDecoration:order.price_room?'line-through':''}">￥{{goodsMoney}}</text>
			</view>
		</view>

		<view class="pay_btn">
			<view class="btn" @click="pay">
				立即支付
			</view>
		</view>
		
		<u-popup :show="payShow" @close="close" @open="open" mode="center" round="12rpx" closeable>
		            <view style="color: #AC7D3D;text-align: center;width: calc(100vw - 100upx);padding: 20upx 0;">
		                <image style="width: 284upx;height: 220upx;margin: 40upx auto;" src="../../static/payOk.png" mode=""></image>
										<view class="" style="font-size: 36upx;font-weight: 700;">
											支付成功
										</view>
										<view class="" style="font-size: 32upx;">
											如要购买保险请联系客服
										</view>
		            </view>
				</u-popup>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsList: [],
				addressData: {},
				order: {},
				discountCoupon:{},
				addressShow:false,
				userData:{},
				checked:false,
				payShow:false,
				vipData:{}
				// sum: 0
			}
		},
		computed:{
			goodsMoney(){
				
				
			
				let num = (this.order.member_zt==2||this.checked?this.order.price_s:this.order.price)+(+this.order.price_r)
				if(this.checked) num+=this.vipData.price
				if(this.discountCoupon.price)num-=this.discountCoupon.price
				return  num.toFixed(2)
			},
			// addressShow(){
			// 	return this.order.order.type.indexOf(2)!=-1||this.order.props_list.length;
			// }
		},
		onLoad(e) {
			this.userData = uni.getStorageSync("userData")
			let data = JSON.parse(e.data)
			
			this.$myRuquest('home/user/order_save',{order_id:data.order.order_id})
			
			
			data.activ_list.forEach(item=>{

				if(item.props_list||item.rent_list) this.addressShow=true
			})
			this.goodsList = data.activ_list
			this.$myRuquest('home/user/member_list').then(res=>{
				this.vipData=res.data[0]
			})
			// let sum = 0
			// this.goodsList.forEach(item => {
			// 	sum += item.num * (data.member_zt == 2 ? item.price_s : item.price_a)
			// 	console.log(sum)
			// 	if (item.props_list) sum += item.props_list.num * item.props_list.price
			// 	console.log(sum)
			// 	if (item.rent_list) {
			// 		sum += item.rent_list.num * item.rent_list.price_s + (item.rent_list.price - 0)
			// 	}
			// })
			// this.sum = sum
			this.order = data
			this.checked=this.order.member_zt!=2
			
		},
		onShow() {
			this.address()
			

		},
		methods: {
			address() {
				this.$myRuquest('home/user/add_list').then(res => {
					let addressData = res.data.filter(item => item.status == 2)[0]
					this.addressData = addressData
				})
			},
			discount(){
				let that=this
				uni.navigateTo({
					url:'/pages/me/myCoupon/myCoupon?money='+(this.goodsMoney-this.order.price_r),
					events: {
					        someEvent: function (data) {
										that.discountCoupon=data
					        }
					      }
				})
			},
			nav() {
				uni.navigateTo({
					url: '../addressList/addressList'
				})
			},
			close(){
				this.payShow=false
				uni.navigateBack({
					delta:1
				})
			},
			pay(){
				let data={
					order_id:this.order.order.order_id,
					price:this.order.order.price_room||this.goodsMoney,
					member_id:this.checked?this.vipData.id||'':'',
					coupons_id:this.discountCoupon.id||''
				}
				if(this.addressData){
						data.add_id=this.addressData.id
				}
				console.log(data)
				this.$myRuquest('home/user/order_pay',data).then(res=>{
					if(res.data){
						this.payMoney(res.data)
					}else{
						this.payShow=true

					}
					
				})
			},
			payMoney(data) {
					let that = this
					uni.requestPayment({
						provider: 'wxpay',
						nonceStr: data.nonceStr,
						package: data.package,
						paySign: data.paySign,
						signType: data.signType,
						timeStamp: data.timeStamp,
						success: function(res) {
							that.payShow=true
						},
						fail: function(err) {
							that.$refs.uToast.show({
								type: 'error ',
								message: '支付失败'
							})
						}
					})
				}
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #FAFAFA;
		min-height: calc( 100vh - 160upx);
		padding-bottom: 160upx;
	}

	.address {
		display: flex;
		background-color: #FFFFFF;
		padding: 30upx 50upx;
		align-items: center;
		font-size: 32upx;
		font-weight: 700;
		color: #333333;

		image {
			width: 60upx;
			height: 60upx;
			margin: auto 0;
			margin-right: 20upx;
		}
		
		.text {
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: 28upx;
			font-weight: 700;
			view:nth-child(1) {
				color: #999999;
				text:nth-child(1) {	
					color: #333333;	
					margin-right: 10upx;
				}
			}		
			view:nth-child(2) {
				flex: 1;
				margin-top: 20upx;
			}
		}
	}

	.goods_list {
		background-color: #FFFFFF;
		padding: 20upx 40upx;

		.goods {

			image {
				width: 160upx;
				height: 160upx;
				border-radius: 8upx;
				margin-right: 30upx;
			}

			.goods_text {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				flex: 1;

				.title {
					font-size: 28upx;
					color: #333333;
					font-weight: 700;
				}

				.type {
					text {
						background-color: #F6F6F6;
						color: #999999;
						padding: 10upx 20upx;
						font-size: 24rpx;
						border-radius: 25upx;
					}
				}

				.num {
					display: flex;
					justify-content: space-between;
					color: #333333;

					text:nth-child(1) {
						text {
							font-size: 24upx;
							color: #999999;
						}

					}

					text:nth-child(2) {
						font-size: 24upx;
					}
				}
			}
		}
	}

	.remark {
		background-color: #FFFFFF;
		margin-top: 20upx;
		padding: 0upx 40upx;

		.buyVip {
			display: flex;
			align-items: center;
			padding: 20upx 0;
			padding-bottom: 0;

			.text {
				flex: 1;
				font-size: 28upx;
				color: #333333;
				font-weight: 700;

				view:nth-child(2) {
					font-size: 24upx;
					font-weight: 100;
				}
			}

			image {
				width: 40upx;
				height: 40upx;
			}
		}

		.remark {
			padding: 20upx 0;
			display: flex;
			justify-content: space-between;
			font-size: 28upx;
			color: #333333;
			font-weight: 700;

			text:nth-child(2) {
				font-weight: 100;
				color: #999999;
			}
		}
	}

	.statistics_num {
		margin-left: 20upx;

		text {
			font-size: 20upx;
		}
	}

	.prop_list {
		// padding-left: 160upx;
		font-size: 24upx;
		color: #333333;
		display: flex;
		flex-direction: row-reverse;
		margin-top: 20upx;

		>view {
			// flex: 1;
			margin: 0 20upx;

			word-wrap: break-word;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;

			.statistics_num {
				margin-left: 20upx;

				text {
					font-size: 20upx;
				}
			}
		}

		>view:nth-child(2) {
			display: flex;
			justify-content: space-between;
			margin-left: 10upx;
		}
	}

	.statistics {
		background-color: #FFFFFF;
		margin-top: 20upx;
		font-size: 28upx;
		font-weight: 700;
		color: #333333;
		padding: 20upx 40upx;

		.statistics_item {
			display: flex;
			margin: 10upx 0;
			justify-content: space-between;
		}
	}

	.pay_btn {
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20upx 0;
		padding-bottom: 40upx;

		.btn {
			width: 368upx;
			height: 80upx;
			border-radius: 40upx;
			background-color: #FED194;
			color: #AC7D3D;
			line-height: 80upx;
			text-align: center;
			margin: 0 auto;
		}
	}
</style>
